.MessageBlock {
    --controlLen: 414;
    /* 背宽度 */
    --MBW: calc(var(--controlLen, 414) * 0.7861 * 1px);
    /* 背高度 */
    --messageBlockHigh: calc(var(--MBW) * 0.7047);
     /* 时间字体大小 */
    --MBFontTimeSize: calc(var(--MBW) * 0.0351);
    /* 标题字体大小 */
    --MBFontTitleSize: calc(var(--MBW) * 0.0643);
    /* 背颜色 */
    --messageBlockColor: var(--StandardWhite, rgba(255, 255, 255, 1));
    /* 背阴影 */
    --messageBlockShadowColor: var(--ShadowBlue, rgba(0, 0, 0, 0.25));
    /* 里块颜色 */
    --MBRectIn: var(--TransparentBlue, rgba(64, 96, 255, 0.8));
    /* 时间字体颜色 */
    --MBFontTimeColor: var(--StandardBlue, rgba(64, 96, 255, 1));
    /* 标题字体颜色 */
    --MBFontTitleColor: var(--FontBlack, rgba(0, 0, 0, 1));
    /* 来源字体颜色 */
    --MBFontFromColor: var(--FontLightBlack, rgba(128, 139, 151, 1));

    width: fit-content;
    /* padding-top: calc(var(--messageBlockHigh) * 0.0726); */
    /* padding-bottom: calc(var(--messageBlockHigh) * 0.0726); */
    /* scroll-snap-align: start; */
}

.MessageBlock .back {
    width: var(--MBW);
    height: var(--messageBlockHigh);
    background-color: var(--messageBlockColor);
    background-position: center;
    background-size: cover;
    box-shadow: 0px 5px 18px var(--messageBlockShadowColor);
    border-radius: calc(var(--MBW) * 0.0351) calc(var(--MBW) * 0.0351) calc(var(--MBW) * 0.0877) calc(var(--MBW) * 0.0058);

    overflow: hidden;
    position: relative;
    transition: all 1s;
}

.MessageBlock img {
    /* 防止重叠 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 1s;
}

.MessageBlock .rectOut {
    width: 100%;
    height: 38%;

    position: absolute;
    bottom: 0;

    border-radius: calc(var(--MBW) * 0.0877) calc(var(--MBW) * 0.0058) calc(var(--MBW) * 0.0877) calc(var(--MBW) * 0.0058);
    background-color: var(--MBRectIn);
    box-shadow: 0px 2px 4px var(--messageBlockShadowColor);
}

.MessageBlock .rectIn {
    width: 90%;
    height: 90%;

    background-color: var(--messageBlockColor);
    border-radius: calc(var(--MBW) * 0.0877) 0 calc(var(--MBW) * 0.0877) 0;
    box-shadow: 0px 2px 4px var(--messageBlockShadowColor);

    display: flex;
    flex-flow: column;
    transition: all 1s;
}

.MessageBlock .labelTime {
    width: 25%;
    transform: translate(calc(var(--MBW) * 0.0935), calc(var(--MBW) * 0.0263));
    font-size: var(--MBFontTimeSize);
    color: var(--MBFontTimeColor);
}

.MessageBlock .labelTitle {
    width: 65%;
    transform: translate(calc(var(--MBW) * 0.0935), calc(var(--MBW) * 0.03));
    font-size: var(--MBFontTitleSize);
    color: var(--MBFontTitleColor);
}

.MessageBlock .labelFrom {
    width: 36%;
    transform: translate(calc(var(--MBW) * 0.0935), calc(var(--MBW) * 0.0435));
    font-size: var(--MBFontTimeSize);
    color: var(--MBFontFromColor);
}

.MessageBlock .back:hover img,
.MessageBlock .back:checked img {
    transform: scale(1.2);
}

.MessageBlock .back:hover .rectIn,
.MessageBlock .back:checked .rectIn {
    transform: translateY(-12%);
}